@extends('admin.public')

@section('content')
    <div class="col-md-6">
        <section class="panel panel-default">
            <header class="panel-heading">{{ date('Y') }}年浏览统计</header>
            <div class="panel-body">
                <div id="flot-1ine" style="height:250px"></div>
            </div>
            <footer class="panel-footer bg-white">
                <div class="row text-center no-gutter">
                    <div class="col-xs-{{ $col }} b-r b-light">
                        <p class="h3 m-t">总浏览</p>
                        <p class="text-muted">{{ $allPageViewNum }}次</p>
                    </div>
                    @if(!empty($chunksPageViewNum))
                        @foreach($chunksPageViewNum as $chunk)
                            <div class="col-xs-{{ $col }} b-r b-light chunklist">
                                <p class="h3 m-t">{{ $chunk['name'] }}</p>
                                <p class="text-muted">{{ $chunk['num'] }}次</p>
                            </div>
                        @endforeach
                    @endif
                </div>
            </footer>
        </section>
    </div>

    <div class="col-md-6">
        <section class="panel panel-default">
            <header class="panel-heading">新增信息</header>
            <div class="panel-body">
                <div id="flot-chart" style="height:240px"></div>
            </div>
        </section>
    </div>

    <div class="clearfix"></div>

    <style>
        #allmap {
            height: 400px;
        }
    </style>
    <div class="col-md-6">
        <section class="panel panel-default">
            <header class="panel-heading">
                每日访问地区
                <p class="badge bg-danger pull-right" style="font-weight: 100">全部访问:{{ $allDayViewNum }}</p>
                <p class="badge bg-success pull-right" style="margin-right: 10px;font-weight: 100">
                    今日访问:{{ $todayViewNum }}</p>
            </header>
            <div class="panel-body">
                <div id="allmap"></div>
            </div>
        </section>
    </div>

    <style>
        #source {
            height: 400px;
        }
    </style>
    <div class="col-md-6">
        <section class="panel panel-default">
            <header class="panel-heading">来源统计</header>
            <div class="panel-body">
                <div id="source"></div>
            </div>
        </section>
    </div>
@endsection

@section('js')
    <!-- Flot -->
    <script src="/public/theme/js/charts/flot/jquery.flot.min.js"></script>
    <script src="/public/theme/js/charts/flot/jquery.flot.tooltip.min.js"></script>
    <script src="/public/theme/js/charts/flot/jquery.flot.resize.js"></script>
    <script src="/public/theme/js/charts/flot/jquery.flot.orderBars.js"></script>
    <script src="/public/theme/js/charts/flot/jquery.flot.pie.min.js"></script>
    <script src="/public/theme/js/charts/flot/jquery.flot.grow.js"></script>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=ADd1HT1EMAyEBnx4fxijrNAr6ejjZ0C6"></script>

    <script>
        var d1 = [];
        @foreach($pageView as $mouth => $num)
        d1.push([{{ $mouth }}, {{ $num }}]);
        @endforeach

        $("#flot-1ine").length && $.plot($("#flot-1ine"), [{
                data: d1
            }],
            {
                series: {
                    lines: {
                        show: true,
                        lineWidth: 1,
                        fill: true,
                        fillColor: {
                            colors: [{
                                opacity: 0.3
                            }, {
                                opacity: 0.3
                            }]
                        }
                    },
                    points: {
                        radius: 3,
                        show: true
                    },
                    grow: {
                        active: true,
                        steps: 20,
                        growings: [
                            {
                                stepDirection: "down"
                            }
                        ]
                    },
                    shadowSize: 2
                },
                grid: {
                    hoverable: true,
                    clickable: true,
                    tickColor: "#f0f0f0",
                    borderWidth: 1,
                    color: '#f0f0f0'
                },
                colors: ["#1bb399"],
                xaxis: {},
                yaxis: {
                    ticks: 5
                },
                tooltip: true,
                tooltipOpts: {
                    content: "浏览量:%y.4 次",
                    defaultTheme: false,
                    shifts: {
                        x: 0,
                        y: 20
                    }
                }
            }
        );
                @foreach($create as $chunk => $mouths)
        var data_{{ $chunk }} = [];
        @if (!empty($mouths))
        @foreach($mouths as $mouth=>$num)
        data_{{ $chunk }}.push([{{ $mouth }}, {{ $num }}]);
        @endforeach
        @endif
        @endforeach
        $("#flot-chart").length && $.plot($("#flot-chart"), [
                        @foreach($create as $chunk =>$mouths)
                {
                    data: data_{{ $chunk }},
                    label: "{{ $chunk }}"
                },
                    @endforeach
            ],
            {
                series: {
                    lines: {
                        show: true,
                        lineWidth: 1,
                        fill: true,
                        fillColor: {
                            colors: [{
                                opacity: 0.3
                            }, {
                                opacity: 0.3
                            }]
                        }
                    },
                    points: {
                        show: true
                    },
                    shadowSize: 2
                },
                grid: {
                    hoverable: true,
                    clickable: true,
                    tickColor: "#f0f0f0",
                    borderWidth: 0
                },
                colors: ["#1bb399", "#177bbb", "#abcdef", "#ff552e", "#fedcba"],
                xaxis: {
                    ticks: 15,
                    tickDecimals: 0
                },
                yaxis: {
                    ticks: 10,
                    tickDecimals: 0
                },
                tooltip: true,
                tooltipOpts: {
                    content: "'%s' 增加 %y.4 条信息",
                    defaultTheme: false,
                    shifts: {
                        x: 0,
                        y: 20
                    }
                }
            }
        );

        function resize() {
            $('.x1Axis .tickLabel').each(function () {
                var mouth = parseInt($(this).html()) + '<small class="text-small">月</small>';
                $(this).html(mouth);
            })
        }

        resize();
        $(window).resize(function () {
            resize();
        })
    </script>
    <script type="text/javascript">
        // 百度地图API功能
        var map = new BMap.Map("allmap");    // 创建Map实例
        map.centerAndZoom('昆山', 5);  // 初始化地图,设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放


        // 创建地址解析器实例
        var myGeo = new BMap.Geocoder();
        @foreach($map as $value)
        // 将地址解析结果显示在地图上,并调整地图视野
        myGeo.getPoint("{{ $value }}", function (point) {
            if (point) {
                var marker = new BMap.Marker(point);  // 创建标注
                map.addOverlay(marker);
                marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
            } else {
                alert("您选择地址没有解析到结果!");
            }
        }, "北京市");
        @endforeach

    </script>

    <script src="/public/theme/js/echarts.min.js"></script>
    <script>
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('source'));

        option = {
            title: {
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                x: 'center',
                y: 'bottom',
                data: [
                    @foreach($source as $value)
                        '{{ $value['name'] }}',
                    @endforeach
                ]
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {
                        show: true,
                        type: ['pie', 'funnel']
                    },
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
            series: [
                {
                    name: '来源网站',
                    type: 'pie',
                    radius: [20, 110],
                    center: ['25%', '50%'],
                    roseType: 'radius',
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    lableLine: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    data: [
                            @foreach($source as $value)
                        {
                            value: {{ $value['num'] }}, name: '{{ $value['name'] }}'
                        },
                        @endforeach
                    ]
                },
                {
                    name: '来访地区',
                    type: 'pie',
                    radius: [30, 110],
                    @if (empty($source))
                    center: ['50%', '50%'],
                    @else
                    center: ['75%', '50%'],
                    @endif
                    roseType: 'area',
                    data: [
                            @foreach($pageViewGroupArea as $value)
                        {
                            value: {{ $value['num'] }}, name: '{{ $value['address'] }}'
                        },
                        @endforeach
                    ]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
@endsection



